$(function(){
  let form = layui.form
  let layer = layui.layer
  let myimg
  
  let query = {
      type: 1,	 //1是文字类型，2图片类型
      page: 1,  // 页码值
      limit: 10,    //每页显示多少条数据
  }
  let query2 = {
    type: 2,	 //1是文字类型，2图片类型
    page: 1,  // 页码值
    limit: 10,    //每页显示多少条数据
}
  
  // 渲染友情链接页面
  function getlink() {
      query.type = 1
       axios.get('/ydd_link/list', {
          params: query,
          headers: {
              'X-Token': localStorage.getItem('x-token')
          }
      }).then(function({ data: { errno, errmsg, data } }){
          if (errno !== 0) {
              return layer.msg(errmsg)
          }
          document.querySelector('thead').innerHTML = `<tr>
          <th>#</th>
          <th>标题</th>
          <th>链接描述</th>
          <th>链接类型</th>
          <th>链接地址</th>
          <th>操作</th>
        </tr>`
          console.log(data)
          document.querySelector('#list').innerHTML = data.data.map(function ({ id, title, url, des, type }) {
              type = type === '1' ? '文字类型' : '图片类型'
              console.log(type)
              return `<tr>
                  <td>${id}</td>
                  <td>${title}</td>
                  <td>${des}</td>
                  <td>${type}</td>
                  <td>${url}</td>
                  <td style="text-align: center;">
                    <button data-id = "${id}" id="edit" type="button" class="layui-btn layui-btn-normal layui-btn-xs btn_edit"><i class="layui-icon">&#xe642;</i> </button>
                    <button data-id = "${id}" id="remove" type="button" class="layui-btn layui-btn-danger layui-btn-xs btn_delete"><i class="layui-icon">&#xe640;</i></button>
                  </td>
                </tr>`
          }).join('')
      
          renderPage(data)
      })
     
  }
  getlink()
  
  
  // 渲染图片链接页面
  async function getphoto() {
      query2.type = 2
      let { data: { errno, errmsg, data } } = await axios.get('/ydd_link/list', {
          params: query2,
          headers: {
              'X-Token': localStorage.getItem('x-token')
          }
      })
      if (errno !== 0) {
          return layer.msg(errmsg)
      }
      document.querySelector('thead').innerHTML = `<tr>
      <th>#</th>
      <th>链接描述</th>
      <th>链接图片</th>
      <th>链接类型</th>
      <th>链接地址</th>
      <th>操作</th>
    </tr>`
      console.log(data)
      document.querySelector('#list').innerHTML = data.data.map(function ({ id, img, url, des, type }) {
          type = type === '1' ? '文字类型' : '图片类型'
          return `<tr>
              <td>${id}</td>
              <td>${des}</td>
              <td><img src="http://124.223.14.236:8060/${img}" alt="" style = "width: 120px;"></td>
              <td>${type}</td>
              <td>${url}</td>
              <td style="text-align: center;">
                <button data-id = "${id}" id="edit2" type="button" class="layui-btn layui-btn-normal layui-btn-xs btn_edit"><i class="layui-icon">&#xe642;</i> </button>
                <button data-id = "${id}" id="remove" type="button" class="layui-btn layui-btn-danger layui-btn-xs btn_delete"><i class="layui-icon">&#xe640;</i></button>
              </td>
            </tr>`
      }).join('')
  
      renderPage2(data)
  }
  
  
  // 给文章链接和图片链接注册点击事件
  $('#one').click(function () {
      $('.smLine').css('transform', 'translateX(0)')
      $(this).addClass('mycolor').siblings().removeClass('mycolor')
      document.querySelector('thead').innerHTML = ''
      document.querySelector('#list').innerHTML = ''
      $('#page-box2').hide()
      $('#page-box').show()
      getlink()
  
  })
  
  $('#two').click(function () {
      $('.smLine').css('transform', 'translateX(130%)')
      $(this).addClass('mycolor').siblings().removeClass('mycolor')
      document.querySelector('thead').innerHTML = ''
      document.querySelector('#list').innerHTML = ''
      $('#page-box').hide()
      $('#page-box2').show()
      getphoto()
  })
  
  
  
  
  
  
  
  // 分页功能
  let laypage = layui.laypage;
  function renderPage(data) {
      laypage.render({
          elem: 'page-box', //注意，这里的 test1 是 ID，不用加 # 号
          count: data.count,  //数据总数，从服务端得到
          limit: query.limit,   //每页显示的条数
          limits: [10, 20, 30, 50, 60],   //每页条数的选择项
          curr: query.page,      //起始页
          theme: '#409eff',
          layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
          jump: function (obj, first) {
              // jump回调函数触发的2种情况
              // 1.laypage.render函数调用的时候会触发   形参first是true
              // 2.分页切换会触发该回调函数             形参是undefined
  
              //obj包含了当前分页的所有参数，比如：
              console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
              console.log(obj.limit); //得到每页显示的条数
  
              query.page = obj.curr
              query.limit = obj.limit
  
              //首次不执行 ==> 点击切换的时候执行，发请求
              if (!first) {
                  //do something
                  getlink()
  
              }
          }
      });
  }
  // renderPage()
  
  // 第二个分页
  function renderPage2(data) {
      laypage.render({
          elem: 'page-box2', //注意，这里的 test1 是 ID，不用加 # 号
          count: data.count,  //数据总数，从服务端得到
          limit: query2.limit,   //每页显示的条数
          limits: [10, 20, 30, 50, 60],   //每页条数的选择项
          curr: query2.page,      //起始页
          theme: '#409eff',
          layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
          jump: function (obj, first) {
              // jump回调函数触发的2种情况
              // 1.laypage.render函数调用的时候会触发   形参first是true
              // 2.分页切换会触发该回调函数             形参是undefined
  
              //obj包含了当前分页的所有参数，比如：
              console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
              console.log(obj.limit); //得到每页显示的条数
  
              query2.page = obj.curr
              query2.limit = obj.limit
  
              //首次不执行 ==> 点击切换的时候执行，发请求
              if (!first) {
                  //do something
                  getphoto()
  
              }
          }
      });
  }
  
  
  
  // 新增功能
  let addFormStr = ` <form  id="addForm" class="layui-form">
  <!-- 第一行 分类名称 -->
    <!-- 文章分类的下拉框区域 -->
    <div class="layui-form-item">
      <label class="layui-form-label">链接类型</label>
      <div class="layui-input-block">
        <select name="type" lay-verify="required">
          <option value=""></option>
          <option value="1">文字链接</option>
          <option value="2">图片链接</option>
        </select>
      </div>
    </div>
    <!-- 隐藏第二行 标题（当下拉框选择文字的时候显示）  -->
    <div class="layui-form-item" style="display: none" id="title1">
      <label class="layui-form-label">标题名称</label>
      <div class="layui-input-block">
        <input type="text" name="title" required lay-verify="required" placeholder="请输入标题名称" autocomplete="off"
          class="layui-input">
      </div>
    </div>
  <!-- 第二行 分类别名  -->
  <div class="layui-form-item">
    <label class="layui-form-label">链接地址</label>
    <div class="layui-input-block">
      <input type="text" name="url" required lay-verify="required" placeholder="请输入链接地址名称" autocomplete="off"
        class="layui-input">
    </div>
  </div>
  <!-- 第三行 文本域 -->
  <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">链接描述</label>
      <div class="layui-input-block">
        <textarea name="des" lay-verify="required" placeholder="请输入链接描述名称" class="layui-textarea"></textarea>
      </div>
    </div>
   
  </form>
  <!-- 第四行 图片上传form -->
  <form class="layui-form" action="" id="form2">
     <div class="layui-form-item" style="display: none" id="title2">
     <label class="layui-form-label">链接图片:</label>
     <div class="layui-input-block">
       <input type="file" name="file" id="fileCover" style="display: none" accept="image/jpeg,image/png,image/gif,image/bmp"/>
       <button type="button" class="layui-btn" id="submit">点击上传</button>
       <div class="tp" style="display: none;position: relative;">
       <img src="" style="width:100px;">
       <h5></h5>
       <button id="reset" style="position: absolute;top:0;right:0;" class="layui-btn layui-btn-primary">x</button>
       </div>
     </div>
   </div>
   </form>`
  
  let openCate
  $('#btnAddCate').on('click', function () {
      // 弹出框
      openCate = layer.open({
          content: addFormStr,
          type: 1,
          title: '添加友情链接',
          area: ['690px', '400px'],
          btn: ['确定', '取消']
      });
      form.render('select')
  })
  
  // 利用事件委托给下拉框注册change事件
  form.on('select', function (data) {
      let val = data.value;
      select = data.value;
      // console.log(val)
      if (val == 1) {
          $('#title1').show();
          $('#title2').hide();
      } else {
          $('#title2').show();
          $('#title1').hide();
      }
  });
  
  //  点上传文件给图片默认点击文件上传，上传图片
  function photoFlie(){
      $('body').on('click', '#submit', function () {
          $('#fileCover').click();
      });
      $('body').on('change', '#fileCover', function (e) {
          $('#form2').submit();
          // $('.container').show()
          // console.log($(this))
      
      });
      $('body').on('submit', '#form2',async function (e) {
          e.preventDefault();
          let fd = new FormData($('#form2')[0]);
         let { data } = await axios.post('common/upload?type=images', fd, {
              headers: {
                  'X-Token': localStorage.getItem('x-token'),
                  'Content-Type': 'multipart/form-data'
              }
          })
          
              myimg = data.data.savePath //拿到图片的地址
              let myimgname = data.data.name // 拿到图片的名字
              // if(data.errno !== 0){
              //     return layer.msg(data.errmsg)
              // }
          
              $(this).find('.tp').show()
              $(this).find('img').attr('src', `http://124.223.14.236:8060/${data.data.savePath}`)
              $(this).find('h5').html(data.data.name)
              // .then(function({errno,data}){
              // console.log(res)
              // myimg = data.savePath //拿到图片的地址
              // myimgname = data.name // 拿到图片的名字
          
              // $(this).find('img').attr('src',`http://124.223.14.236:8060/${data.savePath}`)
              // })
          
          // console.log(data)
      
      });
  }
  photoFlie()
  
  $('body').on('click', '.layui-layer-btn0', function () {
      $('#addForm').submit()
  })
  $('body').on('submit', '#addForm',  function (e) {
      e.preventDefault()
      // let data = $(this).serialize()
      // console.log(data)
      const type = $(this).find('[name = type]').val()
      const title = $(this).find('[name = title]').val()
      const des = $(this).find('[name = des]').val()
      const url = $(this).find('[name = url]').val()
      // console.log(type)
      axios.post('/ydd_link/add', { des: des, img: myimg || '', title: title, type: type, url: url }, {
          headers: {
              'X-Token': localStorage.getItem('x-token'),
              // 'Content-Type':'multipart/form-data'
          }
      }).then(function(res){
          console.log(res)
          if (res.data.errno !== 0) {
              return layer.msg('新增失败')
          }
      
          layer.msg('新增成功')
          getlink()
          layer.close(openCate)
      })
      
  })
  // return
  //   事件委托给插号注册点击事件 点击file文件清空
  $('body').on('click', '#reset', function () {
      $(this).parent().siblings('#fileCover').val('')
      $(this).parent().fadeOut()
  })
  
  // 删除
  $('body').on('click', '#remove', function () {
      let id = $(this).attr('data-id');
      console.log(id);
      layer.confirm('确定删除吗?', { title: '提示' }, function (index) {
          axios({
              method: 'get',
              url: '/ydd_link/del?id=' + id,
              headers: {
                  'X-Token': localStorage.getItem('x-token')
              }
          }).then(res => {
              console.log(res);
  
              if (res.data.errno !== 0) {
                  return layer.msg('删除失败')
              }
              layer.close(index);
              getlink()
              getphoto()
          });
      });
  });
  
  
  //   文字链接编辑
  let editFormStr = ` <form  id="editForm" class="layui-form" lay-filter="editform">
  <!-- 第一行 分类名称 -->
    <!-- 文章分类的下拉框区域 -->
    <div class="layui-form-item" >
      <label class="layui-form-label">链接类型</label>
      <div class="layui-input-block">
        <select name="type" lay-verify="required">
          <option value=""></option>
          <option value="0" >文字链接</option>
          <option value="1">图片链接</option>
        </select>
      </div>
    </div>
    <!-- 隐藏第二行 标题（当下拉框选择文字的时候显示）  -->
    <div class="layui-form-item"  id="title1">
      <label class="layui-form-label">标题名称</label>
      <div class="layui-input-block">
        <input type="text" name="title" required lay-verify="required" placeholder="请输入标题名称" autocomplete="off"
          class="layui-input">
      </div>
    </div>
  <!-- 第二行 分类别名  -->
  <div class="layui-form-item">
    <label class="layui-form-label">链接地址</label>
    <div class="layui-input-block">
      <input type="text" name="url" required lay-verify="required" placeholder="请输入链接地址名称" autocomplete="off"
        class="layui-input">
    </div>
  </div>
  <!-- 第三行 文本域 -->
  <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">链接描述</label>
      <div class="layui-input-block">
        <textarea name="des" lay-verify="required" placeholder="请输入链接描述名称" class="layui-textarea"></textarea>
      </div>
    </div>
  </form>
  <!-- 第四行 图片上传form -->
  <form class="layui-form" action="" id="form2">
     <div class="layui-form-item" style="display: none" id="title2">
     <label class="layui-form-label">链接图片:</label>
     <div class="layui-input-block">
       <input type="file" name="file" id="fileCover" style="display: none" accept="image/jpeg,image/png,image/gif,image/bmp"/>
       <button type="button" class="layui-btn" id="submit">点击上传</button>
       <div class="tp" style="display: none;position: relative;">
       <img src="" style="width:100px;">
       <h5></h5>
       <button id="reset" style="position: absolute;top:0;right:0;" class="layui-btn layui-btn-primary">x</button>
       </div>
     </div>
   </div>
   </form>`
  let editCate
  $('body').on('click', '#edit', function () {
      const id = $(this).attr('data-id')
       axios.get('/ydd_link/rowInfo?id=' + id, {
          headers: {
              'X-Token': localStorage.getItem('x-token')
          }
      }).then(function({data:{data}}){
      //给表单赋值
          data.type = data.type
          console.log(data.type)
          form.val("editform", data);

      })
  
     
  
      // 弹出框
      editCate = layer.open({
          content: editFormStr,
          type: 1,
          title: '修改友情链接',
          area: ['690px', '400px'],
          btn: ['确定', '取消']
      });
      form.render('select')
  
      $('body').on('click', '.layui-layer-btn0', function () {
          $('#editForm').submit()
      })
      $('body').on('submit', '#editForm',function (e) {
          e.preventDefault()
          // let data = $(this).serialize()
          // console.log(data)
          const type = $(this).find('[name = type]').val()
          const title = $(this).find('[name = title]').val()
          const des = $(this).find('[name = des]').val()
          const url = $(this).find('[name = url]').val()
          console.log(des)
          // return
           axios.post('/ydd_link/update', { des: des, img: myimg || '', title: title, type: type, url: url,id:id }, {
              headers: {
                  'X-Token': localStorage.getItem('x-token'),
                  // 'Content-Type':'multipart/form-data'
              }
          }).then(function(res){
              console.log(res)
              if (res.data.errno !== 0) {
                  return layer.msg('修改失败')
              }
          
              layer.msg('修改成功')
          getlink()
          })
         
      })
  })
  
  
  // ---------------------------------------------------------------------------------------------
  form.on('select(test2)', function (data) {
    let val = data.value;
    select = data.value;
    // console.log(val)
    if (val == 1) {
        $('#title3').show();
        $('#title4').hide();
    } else {
        $('#title4').show();
        $('#title3').hide();
    }
});
  
  // 图片编辑
  let edit2FormStr = ` <form  id="edit2Form" class="layui-form" lay-filter="edit2form">
  <!-- 第一行 分类名称 -->
    <!-- 文章分类的下拉框区域 -->
    <div class="layui-form-item" >
      <label class="layui-form-label">链接类型</label>
      <div class="layui-input-block">
        <select name="type" lay-verify="required" lay-filter="test2">
          <option value=""></option>
          <option value="1" >文字链接</option>
          <option value="2">图片链接</option>
        </select>
      </div>
    </div>
    <!-- 隐藏第二行 标题（当下拉框选择文字的时候显示）  -->
    <div class="layui-form-item" style="display: none" id="title3">
      <label class="layui-form-label">标题名称</label>
      <div class="layui-input-block">
        <input type="text" name="title" required lay-verify="required" placeholder="请输入标题名称" autocomplete="off"
          class="layui-input">
      </div>
    </div>
  <!-- 第二行 分类别名  -->
  <div class="layui-form-item">
    <label class="layui-form-label">链接地址</label>
    <div class="layui-input-block">
      <input type="text" name="url" required lay-verify="required" placeholder="请输入链接地址名称" autocomplete="off"
        class="layui-input">
    </div>
  </div>
  <!-- 第三行 文本域 -->
  <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">链接描述</label>
      <div class="layui-input-block">
        <textarea name="des" lay-verify="required" placeholder="请输入链接描述名称" class="layui-textarea"></textarea>
      </div>
    </div>
  </form>
  <!-- 第四行 图片上传form -->
  <form class="layui-form" action="" id="form2">
     <div class="layui-form-item"  id="title4">
     <label class="layui-form-label">链接图片:</label>
     <div class="layui-input-block">
       <input type="file" name="file" id="fileCover" style="display: none" accept="image/jpeg,image/png,image/gif,image/bmp"/>
       <button type="button" class="layui-btn" id="submit">点击上传</button>
       <div class="tp" style="position: relative;">
       <img src="" style="width:100px;" id = "lastimg">
       <h5></h5>
       <button id="reset" style="position: absolute;top:0;right:0;" class="layui-btn layui-btn-primary">x</button>
       </div>
     </div>
   </div>
   </form>`
   let edit2Cate
  $('body').on('click', '#edit2', function () {
      const id = $(this).attr('data-id')
       axios.get('/ydd_link/rowInfo?id=' + id, {
          headers: {
              'X-Token': localStorage.getItem('x-token')
          }
      }).then(function({data:{data}}){
      //给表单赋值
      console.log(data)
          data.type = data.type
          console.log(data.type)
          form.val("edit2form", data);
          // 给图片赋值
          $('#lastimg').attr('src', `http://124.223.14.236:8060/${data.img}`)
      })
  
     
  
      // 弹出框
      edit2Cate = layer.open({
          content: edit2FormStr,
          type: 1,
          title: '修改友情链接',
          area: ['690px', '400px'],
          btn: ['确定', '取消']
      });
      form.render('select')
  
      // photoFlie()
      $('body').on('click', '.layui-layer-btn0', function () {
          $('#edit2Form').submit()
      })
      $('body').on('submit', '#edit2Form',function (e) {
          e.preventDefault()
          // let data = $(this).serialize()
          // console.log(data)
          const type = $(this).find('[name = type]').val()
          const title = $(this).find('[name = title]').val()
          const des = $(this).find('[name = des]').val()
          const url = $(this).find('[name = url]').val()
          console.log(des)
          // return
           axios.post('/ydd_link/update', { des: des, img: myimg || '', title: title, type: type, url: url,id:id }, {
              headers: {
                  'X-Token': localStorage.getItem('x-token'),
                  // 'Content-Type':'multipart/form-data'
              }
          }).then(function(res){
              console.log(res)
              if (res.data.errno !== 0) {
                  return layer.msg('修改失败')
              }
          
              layer.msg('修改成功')
          
          getphoto()
          })
         
      })
  })
})

